import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import {
  Form, InputNumber, Select, Button,
} from 'antd';
import styles from './LeftForm.less';

const { Option } = Select;

@Form.create()
class LeftForm extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const {
      handleSubmit,
      form: {
        validateFieldsAndScroll,
      },
    } = this.props;
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        handleSubmit(values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const formTailLayout = {
      wrapperCol: { span: 24 },
    };

    return (
      <Fragment>
        <Form.Item {...formItemLayout} label="机组人员每小时劳动报酬">
          {getFieldDecorator('paymentPerHour', {
            rules: [{
              required: true,
              message: '请输入机组人员每小时劳动报酬',
            }],
          })(
            <InputNumber style={{ width: '100%' }} />
          )}
        </Form.Item>
        <Form.Item {...formItemLayout} label="技术生产率">
          {getFieldDecorator('technologicalProductivity', {
            rules: [{
              required: true,
              message: '请输入技术生产率',
            }],
          })(
            <InputNumber style={{ width: '100%' }} />
          )}
        </Form.Item>
        <Form.Item {...formTailLayout} style={{ textAlign: 'center' }}>
          <Button type="primary" onClick={this.handleSubmit}>
            开始预估
          </Button>
        </Form.Item>
      </Fragment>
    );
  }
}

LeftForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

export default LeftForm;
